<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp"%>
<c:set var="musicFileSeq" scope="request">
<c:forEach var="attachFile" items="${result.attachFileList }">
	<c:if test="${attachFile.attachFileTypeCd eq '02' }">${attachFile.attachFileSeq}</c:if>
</c:forEach>
</c:set>
<c:set var="imageFileSeq" scope="request">
<c:forEach var="attachFile" items="${result.attachFileList }">
	<c:if test="${attachFile.attachFileTypeCd eq '01' }">${attachFile.attachFileSeq}</c:if>
</c:forEach>
</c:set>
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 한국의 논매기 소리 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link href="/css/reset.css" type="text/css" rel="stylesheet" />
<link href="/css/common.css" type="text/css" rel="stylesheet" />
<link href="/css/layout.css" type="text/css" rel="stylesheet" />
<link href="/css/ui.css" type="text/css" rel="stylesheet" />
<style>	
	.smooth_zoom_preloader {
		background-image: url(/img/preloader.gif);
	}	
	.smooth_zoom_icons {
		background-image: url(/img/icons.png);
	}
</style>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="/js/jquery.sidr.min.js" type="text/javascript"></script>
<script src="/js/fakeselect.js" type="text/javascript"></script>
<script src="/js/ui.js" type="text/javascript"></script>
<script src="/js/audiojs/modernizr.custom.22180.js"></script>
<script src="/js/audiojs/audio.min.js"></script>
<script src="/js/jquery.smoothZoom.min.js"></script>
<script type="text/javascript">
//<![CDATA[
(function ($) {
	$(document).ready(function() {
		$( "#pop_tab" ).tabs();
		
		<c:if test="${musicFileSeq ne '' }">
		var a = audiojs.createAll();
		var audio = a[0];
		audio.load('/download.do?contentsId=${result.itemId }&attachFileSeq=${musicFileSeq}');
		</c:if>
	
		<c:if test="${imageFileSeq ne '' }">
		$('#musicSheet').smoothZoom({
			width: '100%',
			height: '100%',
			pan_BUTTONS_SHOW: "NO",
			pan_LIMIT_BOUNDARY: true,
			button_SIZE: 24,
			button_ALIGN: "top right",	
			zoom_MAX: 100,
			border_TRANSPARENCY: 20,
			zoom_OUT_TO_FIT: true,
			/******************************************
			Enable Responsive settings below if needed.
			Max width and height values are optional.
			******************************************/
			responsive: false,
			responsive_maintain_ratio: true,
			max_WIDTH: '',
			max_HEIGHT: ''
		});
		</c:if>
        
	});
}(jQuery));
//]]>
</script>
</head>
<body class="bg_no">
<div class="pop_tab_wrap">
	<!-- 탭메뉴 -->
	<div id="pop_tab">
		<ul>
			<li><a href="#pop_tabs1">기본정보</a></li>
			<c:if test="${imageFileSeq ne '' }">
			<li><a href="#pop_tabs2">악보보기</a></li>
			</c:if>
		</ul>
		<div id="pop_tabs1">
			<c:if test="${musicFileSeq ne '' }">
			<div class="media">
				<!-- 미디어 플레이어 -->
				<audio preload></audio>
				<!-- //미디어 플레이어 -->
			</div>
			</c:if>
			<div class="scroll_box">
				<h3 class="pop_bu_tit">${result.itemNm }</h3>
				<!-- 디테일 정보 -->
				<div class="tb_list pop_tb">
					<table>
						<tbody>
							<tr>
								<th scope="row">명칭</th>
								<td>${result.itemNm }</td>
							</tr>
							<tr>
								<th scope="row">다른제목</th>
								<td>${result.otherNm }</td>
							</tr>
						</tbody>
					</table>
				</div>
				<!-- //디테일 정보 -->
				<h3 class="pop_bu_tit">기본정보</h3>
				<!-- 디테일 정보 -->
				<div class="tb_list pop_tb">
					<table>
						<tbody>
							<tr>
								<th scope="row">녹음지역</th>
								<td>${result.areaNm }</td>
							</tr>
							<tr>
								<th scope="row">녹음날짜</th>
								<td>${result.recordDate }</td>
							</tr>
							<tr>
								<th scope="row">원 녹음테입</th>
								<td>${result.originTapeNm }</td>
							</tr>
							<tr>
								<th scope="row">가창자</th>
								<td>${result.singerNm }</td>
							</tr>
							<tr>
								<th scope="row">가창자이력</th>
								<td>${result.singerCareerHstr }</td>
							</tr>
							<tr>
								<th scope="row">녹음자</th>
								<td>${result.recorderNm }</td>
							</tr>
						</tbody>
					</table>
				</div>
				<!-- //디테일 정보 -->
				<h3 class="pop_bu_tit">부가정보</h3>
				<!-- 디테일 정보 -->
				<div class="tb_list pop_tb">
					<table>
						<tbody>
							<tr>
								<th scope="row">채보자</th>
								<td>${result.extractorNm }</td>
							</tr>
							<tr>
								<th scope="row">유형분류</th>
								<td>${result.itemTypeCntn }</td>
							</tr>
							<tr>
								<th scope="row">가창방식</th>
								<td>${result.singingTypeCntn }</td>
							</tr>
							<tr>
								<th scope="row">받음구 예</th>
								<td>${result.pronunciationCntn }</td>
							</tr>
							<tr>
								<th scope="row">메김구 예</th>
								<td>${result.leadCntn }</td>
							</tr>
							<tr>
								<th scope="row">후렴 예</th>
								<td>${result.refrainCntn }</td>
							</tr>
							<tr>
								<th scope="row">본문 예</th>
								<td>${result.articleCntn }</td>
							</tr>
							<tr>
								<th scope="row">기타 사설</th>
								<td>${result.etcArticleCntn }</td>
							</tr>
							<tr>
								<th scope="row">출현음</th>
								<td>${result.adventNt }</td>
							</tr>
							<tr>
								<th scope="row">종지음</th>
								<td>${result.cadenceNt }</td>
							</tr>
							<tr>
								<th scope="row">요성음</th>
								<td>${result.flexuralNt }</td>
							</tr>
							<tr>
								<th scope="row">리듬구조</th>
								<td>${result.rhythmStrcCntn }</td>
							</tr>
							<tr>
								<th scope="row">빠르기</th>
								<td>${result.songSpeedCntn }</td>
							</tr>
							<tr>
								<th scope="row">기발행 음반</th>
								<td>${result.publishAlbumNm }</td>
							</tr>
							<tr>
								<th scope="row">참고 서적</th>
								<td>${result.referenceBookNm }</td>
							</tr>
							<tr>
								<th scope="row">곡 해설</th>
								<td>${result.songExplanationCntn }</td>
							</tr>
							<tr>
								<th scope="row">좌표(위도)</th>
								<td>${result.longitude }</td>
							</tr>
							<tr>
								<th scope="row">좌표(경도)</th>
								<td>${result.latitude }</td>
							</tr>
						</tbody>
					</table>
				</div>
				
			</div>
			
		</div>
		<div id="pop_tabs2">
			<c:if test="${imageFileSeq ne '' }">
				<div style="width:580px; height:690px; overflow-x:auto; overflow-y:auto;margin:12px 0 12px 0; padding-top:7px;">
				<img id="musicSheet" src="/download.do?contentsId=${result.itemId }&attachFileSeq=${imageFileSeq}"/>
				</div>
			</c:if>
		</div>
	</div>
	<!-- 탭메뉴 -->
	<!-- 버튼 -->
			<div class="btn_area">
				<div class="t_center">
					<a href="javascript:self.close();" class="btn_list_view"><span>닫기</span></a>
				</div>
			</div>
			<!-- //버튼 -->
</div>
</body>
</html>